I have a table layed out like this:

        <td>
                somename
        </td>
        <td class="hoverable value" >
                somevalue
        </td>
        <td class="changed">

        </td>
        <td class="original value">
            <input type="hidden" value="somevalue" />
        </td>

And what I'm trying to do is, I hover over the hoverable td which turns it into a textbox. Once I hover out I want to check the hidden field for it's original value and put an image in changed if the 2 are different from each other. I already have this: $(document).ready( function() { var newHTML = '';

    $('table td.hoverable').hover(
    function () {
        var oldHTML = $(this).html().trim();
        $(this).html('<input type=\'text\' value=\'' + oldHTML + '\' size=\'' + ((oldHTML).length + 2) +'\' />');
    },
    function() {
        newHTML = $('input', this).val();
        var oldHTML = $(this).next('td.original').children('hidden').val();
       if(newHTML != oldHTML) {
            $(this).next('td.changed').html('Changed');
        }
        $(this).html(newHTML);
    })
});

but it doesn't work. What fails apparently is grabbing the value of the hidden field, and I've tried selecting it in several different ways but just can't get to it. Any ideas or tips are gratefully appreciated ;)